<template>
  <!--考核周期管理-->
  <page-list :pageOption="pageOption" />
</template>

<script setup>
  import PageList from '../../../components/pageList/index.vue';

  const pageOption = {
    dataUrl: '/emp/epmBasePeriod',
    noSelection: true,
    // method: 'get',
    //查询条件表单
    searchForm: [
      {
        field: 'periodName',
        label: '周期名称',
        component: 'Input',
        colProps: { span: 8 },
      },
      {
        field: 'periodCode',
        label: '周期编码',
        component: 'Input',
        colProps: { span: 8 },
      },
    ],
    //数据列表表头
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        width: 80,
        ifShow: false,
      },
      {
        title: '周期名称',
        dataIndex: 'periodName',
        width: 150,
        align: 'center',
      },
      {
        title: '周期编码',
        dataIndex: 'periodCode',
        width: 150,
        align: 'center',
      },
      {
        title: '开始日期',
        dataIndex: 'beginDate',
        align: 'center',
        width: 150,
      },
      {
        title: '结束日期',
        dataIndex: 'endDate',
        align: 'center',
        width: 150,
      },
      {
        title: '创建日期',
        dataIndex: 'sysCreateDate',
        align: 'center',
        width: 150,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width: 150,
        align: 'center',
      },
    ],
    modalForm: [
      {
        field: 'id',
        label: 'id',
        component: 'Input',
        show: false,
      },
      {
        field: 'periodCode',
        label: '周期编码',
        component: 'DatePicker',
        required: true,
        componentProps: {
          valueFormat: 'YYYY',
          placeholder: '请选择周期编码',
          picker: 'year',
        },
        dynamicDisabled: ({ values }) => {
          return !!values.id;
        },
      },
      {
        field: 'remark',
        label: '备注',
        component: 'InputTextArea',
        componentProps: {
          rows: 5,
        },
        dynamicRules: () => {
          return [
            {
              validator: (_, value) => {
                if (null != value && value.length && value.length > 500) {
                  return Promise.reject('备注字数不能超过500');
                }
                return Promise.resolve();
              },
            },
          ];
        },
      },
    ],
  };
</script>

<style scoped></style>
